import React, {useEffect, useState} from 'react';
import {Table, Typography} from '@alifd/next';

const {H5} = Typography;

const InterfacDoc = (props) => {
    const {data} = props;
    // eslint-disable-next-line no-unused-vars
    const [dataSourceHeader, setDataSourceHeader] = useState([{
        name: "projectInstId",
        type: "String",
        must: "是",
        description: "本项目实例Id，固定值为："+data.id
    },{
        name: "variableData",
        type: "String",
        must: "是",
        description: "具体查看variableData列表"
    }]);
    const [variableData,setVariableData] = useState([]);

    useEffect(() => {
        const myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        const raw = JSON.stringify({
            "projectInstId": data.id
        });

        const requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        // eslint-disable-next-line no-undef
        fetch(`${config.servicePath}projectData/searchProjectDatas`, requestOptions)
            .then(response => response.json().then(result => {
                const contentDataJson = JSON.parse(result.data[0].contentData);
                const newVariableData = [];
                contentDataJson.map(item => {
                    console.log(item)
                    if (item.variable) {
                        newVariableData.push({
                            name: item.filedId,
                            type: "String",
                            must: "是",
                            description: `例："${item.contentData || item.imgUrl}"`
                        })
                    }
                })
                setVariableData(newVariableData)
            }))
            .catch(error => console.log('error', error));
    }, [])

    // eslint-disable-next-line no-undef
    const code_1 = `POST ${config.publicAddress}createImage HTTP/1.1
Content-Type:application/json
{${dataSourceHeader.map(item => {
        return `\n  "${item.name}":"String"`
    })}
}`


    return (
        <div>
            <H5>请求方法</H5>
            <div style={{
                background: "#f5f5f5",
                border: "1px solid #ccc",
                padding: 5,
                overflow: "auto",
                borderRadius: 4
            }}>
                <pre>
                    {code_1}
                </pre>
            </div>
            <H5>Body参数</H5>
            <Table dataSource={dataSourceHeader} hasBorder={false}>
                <Table.Column title="名称" htmlTitle="名称" dataIndex="name"/>
                <Table.Column title="类型" dataIndex="type"/>
                <Table.Column title="是否必填" dataIndex="must"/>
                <Table.Column title="描述" dataIndex="description"/>
            </Table>

            <H5>variableData列表</H5>
            <p>需封装完成后通过JSON.parse()转换为字符串</p>
            <Table dataSource={variableData} hasBorder={false}>
                <Table.Column title="名称" htmlTitle="名称" dataIndex="name"/>
                <Table.Column title="类型" dataIndex="type"/>
                <Table.Column title="是否必填" dataIndex="must"/>
                <Table.Column title="描述" dataIndex="description"/>
            </Table>
        </div>
    );
};

export default InterfacDoc;